<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
    <link
      rel="stylesheet"
      media="screen and (max-width:576px)"
      href="css/index.css"
    />
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <link rel="stylesheet" href="./swiper/swiper.min.css" />
</head>
<body>
  <div class="index def show">
      <div class="searchBox">
        <div class="address">北京
          <img src="./img/city_change.png" alt="">
        </div>
        <div class="search">
          <i class="iconfont icon-search"></i>
          <input type="text" class="text" placeholder="搜索：课程、机构" />
        </div>
        <div class="login">登录</div>
      </div>
      <div class="swiper-container" id="course1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/banner_test.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/round01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./img/round01.jpg" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="list">
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_art_icon.png" alt="">
          </a>
          <p>艺术</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_tiyu_icon.png" alt="">
          </a>
          <p>体育</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_yuyan_icon.png" alt="">
          </a>
          <p>语言</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_liuxue_icon.png" alt="">
          </a>
          <p>留学</p></p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_xiao_icon.png" alt="">
          </a>
          <p>小学</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_sheng_icon.png" alt="">
          </a>
          <p>小升初</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_chuzhong_icon.png" alt="">
          </a>
          <p>初中</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_zhongkao_icon.png" alt="">
          </a>
          <p>中考</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_gao_icon.png" alt="">
          </a>
          <p>高中</p>
        </div>
        <div class="item">
          <a href="javascript:;">
            <img src="./img/class_sheng_icon.png" alt="">
          </a>
          <p>更多</p>
        </div>
      </div>
      <div class="moreSchool">
        <div class="title">
          <div class="left">
            <img src="./img/icon_jigou.png" alt="">
            更多学校
          </div>
          <div class="right">
            推荐学校
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="exam">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/school_1.jpg" alt="">
            </a>
            <p>中考冲刺</p>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/school_2.png" alt="">
            </a>
            <p>新东方教育</p>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/school_3.jpg" alt="">
            </a>
            <p>英语四六级</p>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/school_4.jpg" alt="">
            </a>
            <p>3节课</p>
          </div>
        </div>
      </div>
      <div class="time">
        <div class="title">
          <div class="left">
            <img src="./img/icon_time.png" alt="">
            限时抢报
          </div>
          <div class="right">
            更多优惠
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="class">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/favorable_1.jpg" alt="">
              <p>钢琴精品课</p>
            </a>
            <div class="showtime">
              距开枪5天24：52：23
            </div>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img//favorable_2.jpg" alt="">
              <p>钢琴精品课</p>
            </a>
            <div class="showtime">
              距开枪5天24：52：23
            </div>
          </div>
        </div>
      </div>
      <div class="time">
        <div class="title">
          <div class="left">
            <img src="./img/icon_middle.png" alt="">
            中小学
          </div>
          <div class="right">
            更多课程
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="class">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid1.jpg" alt="">
              <p>钢琴精品课</p>
            </a>
            
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid2.jpg" alt="">
              <p>钢琴精品课</p>
            </a>
          </div>
        </div>
        <div class="sort">
          <ul>
            <li>
              <a href="javascript:;">
                <span>高中语文</span>
                <img src="./img/cls_icon_chaness.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>小学英语</span>
                <img src="./img/cls_icon_english.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>初中物理</span>
                <img src="./img/cls_icon_wuli.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>高中数学</span>
                <img src="./img/cls_icon_math.png" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="time">
        <div class="title">
          <div class="left">
            <img src="./img/icon_art.png" alt="">
            艺术/体育
          </div>
          <div class="right">
            更多课程
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="class">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid3.jpg" alt="">
              <p>精品散打课</p>
            </a>
            
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid4.jpg" alt="">
              <p>精品美声课</p>
            </a>
          </div>
        </div>
        <div class="sort">
          <ul>
            <li>
              <a href="javascript:;">
                <span>钢琴</span>
                <img src="./img/cls_icon_gangqin.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>古筝</span>
                <img src="./img/cls_icon_guzheng.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>吉他</span>
                <img src="./img/cls_icon_jita.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>小提琴</span>
                <img src="./img/cls_icon_tiqin.png" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="time">
        <div class="title">
          <div class="left">
            <img src="./img/icon_liuxue.png" alt="">
            语言/留学
          </div>
          <div class="right">
            更多课程
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="class">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid5.jpg" alt="">
              <p>精品日语课</p>
            </a>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid6.jpg" alt="">
              <p>精品德语课</p>
            </a>
          </div>
        </div>
        <div class="sort">
          <ul>
            <li>
              <a href="javascript:;">
                <span>葡萄牙语</span>
                <img src="./img/cls_icon_putao.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>外教口语</span>
                <img src="./img/cls_icon_waijiao.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>新概念英语</span>
                <img src="./img/cls_icon_xingainian.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>剑桥英语</span>
                <img src="./img/cls_icon_jianqiao.png" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="time">
        <div class="title">
          <div class="left">
            <img src="./img/icon_tuozhan.png" alt="">
            拓展训练
          </div>
          <div class="right">
            更多课程
            <img src="./img/icon_more.jpg" alt="">
          </div>
        </div>
        <div class="class">
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid7.jpg" alt="">
              <p>精品日语课</p>
            </a>
          </div>
          <div class="item">
            <a href="javascript:;">
              <img src="./img/cls_mid8.jpg" alt="">
              <p>精品德语课</p>
            </a>
          </div>
        </div>
        <div class="sort">
          <ul>
            <li>
              <a href="javascript:;">
                <span>冬夏令营</span>
                <img src="./img/cls_icon_dongxia.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>亲子出游</span>
                <img src="./img/cls_icon_qinzi.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>儿童乐园</span>
                <img src="./img/cls_icon_ertong.png" alt="">
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <span>拓展培训</span></span>
                <img src="./img/cls_icon_tuozhanpei.png" alt="">
              </a>
            </li>
          </ul>
        </div>
      </div>
  </div>
  <div class="sort def">
    <div class="title">
      全部科目
      <a href="javascript:;"></a>
    </div>
    <div class="left">
      <ul>
        <li class="active1">艺术</li>
        <li>体育</li>
        <li>语言</li>
        <li>留学</li>
        <li>小学</li>
        <li>小升初</li>
        <li>初中</li>
        <li>中考</li>
        <li>高中</li>
        <li>益智</li>
        <li>高考</li>
        <li>学前</li>
        <li>营地</li>
        <li>其他</li>
      </ul>
    </div>
    <div class="right active2">
      <div class="header">
      全部艺术课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          乐器
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">钢琴</a></li>
            <li><a href="javascript:;">小提琴</a></li>
            <li><a href="javascript:;">大提琴</a></li>
            <li><a href="javascript:;">电子琴</a></li>
            <li><a href="javascript:;">琵琶</a></li>
            <li><a href="javascript:;">二胡</a></li>
            <li><a href="javascript:;">萨克斯</a></li>
            <li><a href="javascript:;">吉他</a></li>
            <li><a href="javascript:;">电吉他</a></li>
            <li><a href="javascript:;">圆号</a></li>
            <li><a href="javascript:;">葫芦丝</a></li>
            <li><a href="javascript:;">唢呐</a></li>
            <li><a href="javascript:;">扬琴</a></li>
            <li><a href="javascript:;">长笛</a></li>
            <li><a href="javascript:;">长笛</a></li>
            <li><a href="javascript:;">长笛</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          声乐
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          舞蹈
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          绘画
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          书法
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          媒体艺术
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          雕塑
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          设计
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          戏剧
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
      全部体育课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          运动
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">游泳</a></li>
            <li><a href="javascript:;">羽毛球</a></li>
            <li><a href="javascript:;">篮球</a></li>
            <li><a href="javascript:;">网球</a></li>
            <li><a href="javascript:;">足球</a></li>
            <li><a href="javascript:;">排球</a></li>
            <li><a href="javascript:;">瑜伽</a></li>
            <li><a href="javascript:;">台球</a></li>
            <li><a href="javascript:;">跑酷</a></li>
            <li><a href="javascript:;">轮滑</a></li>
            <li><a href="javascript:;">滑板</a></li>
            <li><a href="javascript:;">骑行</a></li>
            <li><a href="javascript:;">普拉提</a></li>
            <li><a href="javascript:;">高尔夫</a></li>
            <li><a href="javascript:;">耐力跑</a></li>
            <li><a href="javascript:;">橄榄球</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          武术
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">跆拳道</a></li>
            <li><a href="javascript:;">太极拳</a></li>
            <li><a href="javascript:;">空手道</a></li>
            <li><a href="javascript:;">柔道</a></li>
            <li><a href="javascript:;">散打</a></li>
            <li><a href="javascript:;">剑道</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          舞蹈
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          棋牌
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          书法
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
      全部语言课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          英语
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">剑桥英语</a></li>
            <li><a href="javascript:;">外教英语</a></li>
            <li><a href="javascript:;">新概念英语</a></li>
            <li><a href="javascript:;">雅思</a></li>
            <li><a href="javascript:;">新托福</a></li>
            <li><a href="javascript:;">实用英语</a></li>
            <li><a href="javascript:;">SAT考试</a></li>
            <li><a href="javascript:;">SSAT考试</a></li>
            <li><a href="javascript:;">GRE考试</a></li>
            <li><a href="javascript:;">少儿英语</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          多语
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">法语</a></li>
            <li><a href="javascript:;">德语</a></li>
            <li><a href="javascript:;">意大利语</a></li>
            <li><a href="javascript:;">葡萄牙语</a></li>
            <li><a href="javascript:;">韩语</a></li>
            <li><a href="javascript:;">西班牙语</a></li>
            <li><a href="javascript:;">日语</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
      全部留学课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          留学考试
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">托福</a></li>
            <li><a href="javascript:;">雅思</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
      全部小学课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          一年级
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">游泳</a></li>
            <li><a href="javascript:;">羽毛球</a></li>
            <li><a href="javascript:;">篮球</a></li>
            <li><a href="javascript:;">网球</a></li>
            <li><a href="javascript:;">足球</a></li>
            <li><a href="javascript:;">排球</a></li>
            <li><a href="javascript:;">瑜伽</a></li>
            <li><a href="javascript:;">台球</a></li>
            <li><a href="javascript:;">跑酷</a></li>
            <li><a href="javascript:;">轮滑</a></li>
            <li><a href="javascript:;">滑板</a></li>
            <li><a href="javascript:;">骑行</a></li>
            <li><a href="javascript:;">普拉提</a></li>
            <li><a href="javascript:;">高尔夫</a></li>
            <li><a href="javascript:;">耐力跑</a></li>
            <li><a href="javascript:;">橄榄球</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          二年级
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">跆拳道</a></li>
            <li><a href="javascript:;">太极拳</a></li>
            <li><a href="javascript:;">空手道</a></li>
            <li><a href="javascript:;">柔道</a></li>
            <li><a href="javascript:;">散打</a></li>
            <li><a href="javascript:;">剑道</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          三年级
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          四年级
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          五年级
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">美声</a></li>
            <li><a href="javascript:;">民族</a></li>
            <li><a href="javascript:;">流行</a></li>
            <li><a href="javascript:;">卡拉OK</a></li>
            <li><a href="javascript:;">原生态</a></li>
            <li><a href="javascript:;">音乐基础</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
      全部小升初课程
      <span></span>
      </div>
      <div class="thid">
        <div class="top">
          小升初
        </div>
        <div class="table">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">剑桥英语</a></li>
            <li><a href="javascript:;">外教英语</a></li>
            <li><a href="javascript:;">新概念英语</a></li>
            <li><a href="javascript:;">雅思</a></li>
            <li><a href="javascript:;">新托福</a></li>
            <li><a href="javascript:;">实用英语</a></li>
            <li><a href="javascript:;">SAT考试</a></li>
            <li><a href="javascript:;">SSAT考试</a></li>
            <li><a href="javascript:;">GRE考试</a></li>
            <li><a href="javascript:;">少儿英语</a></li>
          </ul>
        </div>
      </div>
      <div class="thid">
        <div class="top Tophide">
          全科辅导
        </div>
        <div class="table hide">
          <ul>
            <li><a href="javascript:;">全部</a></li>
            <li><a href="javascript:;">法语</a></li>
            <li><a href="javascript:;">德语</a></li>
            <li><a href="javascript:;">意大利语</a></li>
            <li><a href="javascript:;">葡萄牙语</a></li>
            <li><a href="javascript:;">韩语</a></li>
            <li><a href="javascript:;">西班牙语</a></li>
            <li><a href="javascript:;">日语</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
      <div class="home active">
        <i class="iconfont icon-shouye"></i>
        <p class="Home">首页</p>
      </div>
      <div class="home">
        <i class="iconfont icon-fenlei"></i>
        <p class="Home">分类</p>
      </div>
      <div class="home">
        <i class="iconfont icon-gouwuche"></i>
        <p class="Home">购物车</p>
      </div>
      <div class="home">
        <i class="iconfont icon-wode"></i>
        <p class="Home">我的</p>
      </div>
  </div>
<script src="./swiper/swiper.min.js"></script>
<script src="./js/jquery.js"></script>
<script>
      var swiper = new Swiper("#course1", {
        autoplay: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
    $(function(){
        $.each($(".home"),function(i){
          $(this).click(function(){
            console.log(i);
            // $('.index').toggle();
            $('.def').eq(i).addClass('show')
            console.log($('.def').not($('.def').eq(i)));
            $('.def').not($('.def').eq(i)).removeClass('show');
          $(this).addClass("active");
          $(".home").not($(this)).removeClass("active");
          })
        }) 
      $('.thid').click(function(){
        $('.table').not($(this).children('.table')).hide();
        $('.top').not($(this).children('.top'))
        .addClass('Tophide')
        $(this).children('.top').removeClass('Tophide');
        $(this).children('.table').show();
      })
      $.each($('.sort .left ul li'),function(i){
        $(this).click(function(){
          $('.sort .left ul li').not($(this)).removeClass('active1')
        $(this).addClass('active1')
        $('.sort .right').eq(i).addClass('active2')
        $('.sort .right').not($('.sort .right').eq(i)).removeClass('active2')
        })
      })
     $.each($('.index .list .item a'),function(i){
       $(this).click(function(){
         location.href='info.html';
       })
     })
     $('.address').click(function(){
      location.href='info.html';
     })
    })
</script>
</body>
</html>
